<template>
  <div class="board">
    <div class="header">
      <div>留言板</div>
      <div style="width:2rem;text-align:right" @click="closeBoard">
        <van-icon name="minus" />
      </div>
    </div>

    <div class="board_body">

      <van-form @submit="onSubmit" >
        <van-field  v-model="form.message"  autosize  type="textarea" placeholder="请再次输入留言内容，我们会尽快与您联系。（必填）" />
        <van-field v-model="form.name" border label="姓名" left-icon="smile-o"  placeholder="姓名" />
        <van-field v-model="form.tel" border label="电话" left-icon="smile-o"  placeholder="电话" />
        <van-field v-model="form.email" border label="邮箱" left-icon="smile-o"  placeholder="邮箱" />
        <van-field v-model="form.address" border label="地址" left-icon="smile-o"  placeholder="地址" />
      </van-form>
    </div>
  </div>

  
  
</template>

<script>
export default {
  data() {
    return {
      form: {
        message: "",
        name:'',
        tel:'',
        email:'',
        address:''
      },
    };
  },
  methods: {
    closeBoard(){
      this.$emit('closeBoard')
    },
    onSubmit() {},
  },
};
</script>

<style lang="less" scoped>
.board {
  width: 35vw;
  position: fixed;
  top: 50vh;
  left: 50vw;
  border-radius: 0.3rem;
  transform: translate(-50%, -50%);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  .header {
    background-color: #4e6ef2;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
  }
  .board_body {
    background-color: #fff;
  }
}
</style>